<template>
	<view @click="goIndexInfo" class="bg-white u-flex u-p-28" :class="{'border-b':!noBorder,'border-r-6':borderRadius}">
		<view>
			<u-image border-radius="14px" width="115px" height="115px" :src="item.cover">
			</u-image>
		</view>
		<view class="right u-m-l-28">
			<view class="color-3 u-line-1 u-font-32">
				{{item.title || item.pet_nickname}}
			</view>
			<view class="info u-m-t-8">
				<u-tag class="u-m-r-16" color="#808080" :text="item.age" size="mini" bg-color="#F6F7FB" mode="dark" />
				<u-tag class="u-m-r-16" color="#808080" :text="item.sex" size="mini" bg-color="#F6F7FB" mode="dark" />
				<u-tag class="u-m-r-16" color="#808080" :text="item.district" size="mini" bg-color="#F6F7FB"
					mode="dark" />
			</view>
			<view class="u-line-2 u-m-b-8 color-80 u-font-12 u-m-t-8">{{item.story}}</view>
			<view class="info">
				<u-tag class="u-m-r-16 u-font-12" color="#333" :text="item.vaccine" bg-color="#FEF2BF" mode="dark" />
				<u-tag class="u-m-r-16 u-font-12" color="#333" :text="item.expelling_parasite" bg-color="#FEF2BF"
					mode="dark" />
				<u-tag class="u-m-r-16 u-font-12" color="#333" :text="item.sterilize" bg-color="#FEF2BF" mode="dark" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['item', 'noBorder', 'borderRadius'],
		name: "indexCard",
		data() {
			return {

			};
		},
		methods: {
			goIndexInfo() {
				uni.navigateTo({
					url: '/pagesIndex/indexInfo/indexInfo?id=' + this.item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.right {
		width: 208px;
		height: 115px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
</style>
